<script>
// vue3中大部分都需要导入
import { ref, reactive } from 'vue'
export default {
  setup () {
    // reactive定义引用类型数据
    const person = reactive({ name: 'tom', age: 30 })
    const person2 = ref({ name: 'jack', age: 100 })

    const change = () => {
      // reactive定义的数据，修改的时候，无需.value
      console.log(person)
      person.name = '汤姆'
      console.log('============')
      // ref定义的数据，修改的时候，需要.value
      console.log(person2)
      person2.value.name = '杰克'
    }

    // 别忘记啦...
    return {
      person,
      person2,
      change
    }
  }
}
</script>

<template>
  <div>
    <p>person name is {{ person.name }} age is {{ person.age }}</p>
    <!-- 在模板中，使用ref定义的数据，使用的时候，不需要.value，跟在js中不一样 -->
    <p>person2 name is {{ person2.name }} age is {{ person2.age }}</p>
    <p>
      <button @click="change">change</button>
    </p>
  </div>
</template>
